HTMLify

*,
*::before,
*::after {
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  display: grid;
  place-items: center;
  background: #000;
  height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Open Sans", "Helvetica Neue", sans-serif;
}

.card {
  margin: 1rem;
  width: 34rem;
  height: 50rem;
  overflow: hidden;
  background: url("https://images.unsplash.com/photo-1699541948287-9c8ce85624ce?q=80&w=2400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") no-repeat center;
  background-size: cover;
  display: grid;
  place-items: center;
}
.card .card-info {
  color: hsl(0deg, 0%, 90%);
  text-align: center;
}
.card .card-info h2 {
  font-size: 4rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 900;
  transform: scale(2);
  opacity: 0;
  transition: 0.5s;
}
.card .card-info p {
  font-size: 1.6rem;
  padding-left: 0;
  transform: scale(1.2);
  opacity: 0;
  transition: 0.4s;
}
.card:hover .card-info h2 {
  opacity: 0.8;
  transform: scale(1);
}
.card:hover .card-info p {
  opacity: 0.6;
  transform: scale(1);
}

/*# sourceMappingURL=style.css.map */